<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧园区可视化平台-胡凌峰</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- iconfont图标 -->
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="./js/echarts.js"></script>
    <script src="./js/hooks.js"></script>
</head>

<body>
    <!-- 导航 -->
    <div class="nav">
        <!-- 名称 -->
        <div class="nav-name">
            智慧园区可视化平台
        </div>
        <!-- 导航内容 -->
        <ul class="nav-content">
            <li>
                <a href="#">营区态势</a>
            </li>
            <li>
                <a href="#">出入管理</a>
            </li>
            <li>
                <a href="#">监控点位</a>
            </li>
            <li class="on">
                <a href="#">能耗管理</a>
            </li>
            <li>
                <a href="#">配置中心</a>
            </li>
        </ul>
        <!-- 导航右侧登录 -->
        <div class="nav-login">
            <!-- 实时时间 -->
            <div class="login-time">
                <span class="year"></span>-<span class="month"></span>-<span class="date"></span> <span class="hours"></span>:<span class="minutes"></span>
            </div>
            <div class="login-btn">
                <span class="iconfont icon-denglu"></span>
                <a href="#">Admin</a>
                <span class="iconfont icon-guanji"></span>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 主体左侧 -->
        <div class="main-left">
            <!-- 当日能耗 -->
            <div class="onday">
                <div class="onday-text">
                    当 日 能耗
                    <p>Kwh</p>
                </div>
                <!-- 动态数字 -->
                <div class="onday-wrap">
                    <div class="num1">
                        <span>4</span>
                    </div>
                    <div class="num2">
                        <span>8</span>
                    </div>
                    <div class="num3">
                        <span>7</span>
                    </div>
                    <div class="num4">
                        <span>3</span>
                    </div>
                    <div class="num5 last-num">
                        <span>5</span>
                    </div>
                </div>
                <!-- 图片 -->
                <div class="onday-bgi"></div>
            </div>
            <!-- 小时用能变化 -->
            <div class="hour-wrap">
                <p>小时用能变化</p>
                <div class="ele-water">
                    <div class="deep">电</div>
                    <div class="shallow">水</div>
                </div>
                <div id="hour-energy"></div>
            </div>
            <!-- 日用能趋势 -->
            <div class="day-wrap">
                <p>日用能趋势</p>
                <div class="ele-water">
                    <div class="deep">电</div>
                    <div class="shallow">水</div>
                </div>
                <div class="day-energy"></div>
            </div>
        </div>
        <!-- 主体右侧 -->
        <div class="main-right">
            <!-- 主体右侧上部 -->
            <div class="right-top">
                <!-- 平均日用量 -->
                <div class="top-avg">
                    <p>平均日用量</p>
                    <p class="green"><span>6,876</span> Kwh</p>
                    <p class="gray">按吨日用量<em>环比变化</em></p>
                    <p class="avg-num">2,820<em>-1%</em></p>
                </div>
                <!-- 装机容量 -->
                <div class="top-cap">
                    <p>装机容量</p>
                    <p class="green"><span>96,790</span> KVA</p>
                    <p class="gray">能耗均值<em>小时最大能耗</em></p>
                    <p class="avg-num">1,834<em>2919</em></p>
                </div>
                <!-- CHIP -->
                <div class="top-svg">
                    <div class="svg-wrap">
                        <div class="chip">
                            <img src="images/chip.svg" alt="加载失败" style="width: 30px;height: 30px;">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                        </div>
                        <p class="sum">273</p>
                        <p>主变台数</p>
                        <p>(台)</p>
                    </div>
                    <div class="svg-wrap">
                        <div class="chip">
                            <img src="images/meter.svg" alt="加载失败" style="width: 30px;height: 30px;">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                        </div>
                        <p class="sum">50,170</p>
                        <p>计量台数</p>
                        <p>(个)</p>
                    </div>
                    <div class="svg-wrap">
                        <div class="chip">
                            <img src="images/luyou.svg" alt="加载失败" style="width: 30px;height: 30px;">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                        </div>
                        <p class="sum">101</p>
                        <p>网关数量</p>
                        <p>(个)</p>
                    </div>
                </div>
            </div>
            <!-- 主体右侧中部 -->
            <div class="right-middle">
                <!-- 饼图 -->
                <div class="middle-pie">
                    <div class="pie-energy"></div>
                </div>
                <!-- 重点关注点位 -->
                <div class="middle-import">
                    <div class="import-title">重点关注点位</div>
                    <div class="import-con">
                        <div class="use-light">
                            照明系统用电（Kwh）
                            <span class="clear">45,313</span>
                        </div>
                        <div class="use-light">
                            空调系统用电（Kwh）
                            <span class="air">24,101</span>
                        </div>
                    </div>
                    <!-- 柱状图＋折线图 -->
                    <div class="import-energy"></div>
                </div>
            </div>
            <!-- 主体右侧底部 -->
            <div class="right-bottom">
                <div class="bottom-tltle">地点能耗情况</div>
                <!-- 折线图 -->
                <div class="bottom-line">
                    <div class="line-wrap line-energy1"></div>
                    <div class="line-wrap line-energy2"></div>
                    <div class="line-wrap line-energy3"></div>
                    <div class="line-wrap line-energy4"></div>
                    <div class="line-wrap line-energy5"></div>
                    <div class="wrap-last line-energy6"></div>
                </div>
                <!-- 绿色分割框 -->
                <div class="seg-wrap">
                    <div class="green-seg"></div>
                    <div class="green-seg"></div>
                    <div class="green-seg"></div>
                    <div class="green-seg"></div>
                    <div class="green-seg"></div>
                    <div class="last-seg green-seg"></div>
                </div>
                <!-- 表格 -->
                <div class="bottom-table">
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">一号楼</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">二号楼</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">保安处</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">实验室</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">食堂</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="3" class="rows">住宿区</td>
                                <td>最大值</td>
                                <td>892</td>
                            </tr>
                            <tr>
                                <td>最小值</td>
                                <td>95</td>
                            </tr>
                            <tr>
                                <td>平均值</td>
                                <td>344.5</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 导航栏实时时间
        var loginTime = document.querySelector('.login-time');
        var spanYear = document.querySelector('.year');
        var spanMonth = document.querySelector('.month');
        var spanDate = document.querySelector('.date');
        var spanHours = document.querySelector('.hours');
        var spanMinutes = document.querySelector('.minutes');
        setInterval(function() {
                var now = new Date();
                spanYear.innerText = now.getFullYear();
                spanMonth.innerText = now.getMonth() + 1;
                spanDate.innerText = now.getDate();
                spanHours.innerText = now.getHours();
                spanMinutes.innerText = now.getMinutes();
            }, 0)
            // 动态数字
        var num1 = document.querySelector('.num1');
        var num2 = document.querySelector('.num2');
        var num3 = document.querySelector('.num3');
        var num4 = document.querySelector('.num4');
        var num5 = document.querySelector('.num5');
        var count1 = 5,
            count2 = 3,
            count3 = 7,
            count4 = 8,
            count5 = 4;
        // 间歇定时器
        setInterval(function() {
            var num5Old = document.querySelectorAll('.num5 span');
            // 移除旧节点
            if (num5Old.length > 1) {
                num5Old[0].remove();
            }
            count1++;
            if (count1 > 9) {
                count1 = 0;
                // 进位
                var num4Old = document.querySelectorAll('.num4 span');
                if (num4Old.length > 1) {
                    num4Old[0].remove();
                }
                count2++;
                if (count2 > 9) {
                    count2 = 0
                        // 进位
                    var num3Old = document.querySelectorAll('.num3 span');
                    if (num3Old.length > 1) {
                        num3Old[0].remove();
                    }
                    count3++;
                    if (count3 > 9) {
                        count3 = 0
                            // 进位
                        var num2Old = document.querySelectorAll('.num2 span');
                        if (num2Old.length > 1) {
                            num2Old[0].remove();
                        }
                        count4++;
                        if (count4 > 9) {
                            count4 = 0
                                // 进位
                            var num1Old = document.querySelectorAll('.num1 span');
                            if (num1Old.length > 1) {
                                num1Old[0].remove();
                            }
                            count5++;
                            if (count5 > 9) {
                                count5 = 0
                            }
                            var num1New = document.createElement('span');
                            num1New.innerText = count5;
                            num1.appendChild(num1New);
                            var nums1 = document.querySelectorAll('.num1 span');
                            nums1[0].style.animation = 'moveNum2 1s forwards';
                            nums1[1].style.animation = 'moveNum 1s forwards';
                        }
                        var num2New = document.createElement('span');
                        num2New.innerText = count4;
                        num2.appendChild(num2New);
                        var nums2 = document.querySelectorAll('.num2 span');
                        nums2[0].style.animation = 'moveNum2 1s forwards';
                        nums2[1].style.animation = 'moveNum 1s forwards';
                    }
                    var num3New = document.createElement('span');
                    num3New.innerText = count3;
                    num3.appendChild(num3New);
                    var nums3 = document.querySelectorAll('.num3 span');
                    nums3[0].style.animation = 'moveNum2 1s forwards';
                    nums3[1].style.animation = 'moveNum 1s forwards';
                }
                var num4New = document.createElement('span');
                num4New.innerText = count2;
                num4.appendChild(num4New);
                var nums4 = document.querySelectorAll('.num4 span');
                nums4[0].style.animation = 'moveNum2 1s forwards';
                nums4[1].style.animation = 'moveNum 1s forwards';
            }
            var num5New = document.createElement('span');
            num5New.innerText = count1;
            num5.appendChild(num5New);
            var nums5 = document.querySelectorAll('.num5 span');
            nums5[0].style.animation = 'moveNum2 1s forwards';
            nums5[1].style.animation = 'moveNum 1s forwards';
        }, 1000);
        // 小时用能变化
        var hourEnergy = document.getElementById('hour-energy');
        var hourOption = {
            textStyle: {
                color: '#fff'
            },
            legend: {
                data: ['今日能耗'],
                textStyle: {
                    color: '#fff',
                },
                right: 100,
                top: 30
            },
            grid: {
                containLabel: true,
                top: 70,
                bottom: 0,
                left: 5,
                right: 30
            },
            xAxis: {
                type: 'category',
                data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                name: '今日能耗',
                data: [6, 160, 45, 42, 50, 250, 200, 180, 230, 70, 175, 55, 0],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        };
        hookEcharts(hourEnergy, hourOption);
        // 日用能趋势
        var dayEnergy = document.getElementsByClassName('day-energy')[0];
        var dayOption = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 50,
                bottom: 20,
                left: 5,
                right: 30
            },
            xAxis: {
                type: 'category',
                data: ['5.10', '5.11', '5.12', '5.13', '5.14', '5.15', '5.16', '5.17', '5.18'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [55, 20, 32, 40, 21, 60, 60, 45, 60],
                type: 'bar',
                itemStyle: {
                    color: 'rgba(4,225,137,0.6)'
                },
                smooth: true
            }]
        };
        hookEcharts(dayEnergy, dayOption);
        // 饼图
        var pieEnergy = document.querySelector('.pie-energy');
        var pieOption = {
            title: {
                text: '用能分析',
                left: '5%',
                top: '8%',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                }
            },
            legend: {
                orient: 'vertical',
                top: '35%',
                left: '13%',
                textStyle: {
                    color: '#fff',
                }
            },
            tooltip: {},
            color: ['#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#9DFF86', '#FEE588'],
            series: [{
                type: 'pie',
                left: '35%',
                top: '10%',
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 700
                    }
                },
                label: {
                    show: true,
                    color: '#fff',
                    formatter(param) {
                        return param.percent + '%';
                    }
                },
                data: [{
                    value: 769,
                    name: '空调系统'
                }, {
                    value: 1154,
                    name: '照明系统'
                }, {
                    value: 1538,
                    name: '洗手间'
                }, {
                    value: 1923,
                    name: '监控系统'
                }, {
                    value: 2308,
                    name: '办公室'
                }, {
                    value: 2308,
                    name: '管理处'
                }],
                radius: ['40%', '55%']
            }]
        };
        hookEcharts(pieEnergy, pieOption);
        // 柱状图＋折线图
        var importEnergy = document.querySelector('.import-energy');
        var importOption = {
            grid: {
                containLabel: true,
                top: 40,
                bottom: 0,
                left: 30,
                right: 30
            },
            xAxis: {
                type: 'category',
                data: [{
                    value: '5月11',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月12',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月13',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月14',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月15',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月16',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月17',
                    textStyle: {
                        color: '#fff'
                    }
                }, {
                    value: '5月18',
                    textStyle: {
                        color: '#fff'
                    }
                }],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ADADAD',
                    }
                }
            },
            yAxis: [{
                type: 'value',
                min: 0,
                interval: 1500,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ADADAD',
                    }
                }
            }, {
                type: 'value',
                min: 0,
                max: 3000,
                interval: 1000,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ADADAD',
                    }
                }
            }],
            series: [{
                type: 'bar',
                barWidth: '15',
                data: [3000, 4300, 1800, 3000, 2700, 3600, 3000, 2700],
                itemStyle: {
                    // 渐变色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#1AE79B' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#7EFCE5' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }, {
                type: 'line',
                data: [3500, 4700, 2000, 3600, 3000, 4100, 3300, 3100],
                symbol: 'none',
                smooth: true,
                lineStyle: {
                    color: '#F0EA00',
                }
            }]
        }
        hookEcharts(importEnergy, importOption);
        // 底部折线图
        var lineEnergy1 = document.querySelector('.line-energy1');
        var lineOption1 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 60],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy1, lineOption1);
        var lineEnergy2 = document.querySelector('.line-energy2');
        var lineOption2 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 60],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy2, lineOption2);
        var lineEnergy3 = document.querySelector('.line-energy3');
        var lineOption3 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [200, 200, 400, 60, 60],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy3, lineOption3);
        var lineEnergy4 = document.querySelector('.line-energy4');
        var lineOption4 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [300, 350, 700, 60, 60],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy4, lineOption4);
        var lineEnergy5 = document.querySelector('.line-energy5');
        var lineOption5 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [400, 600, 200, 500, 0],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy5, lineOption5);
        var lineEnergy6 = document.querySelector('.line-energy6');
        var lineOption6 = {
            textStyle: {
                color: '#fff'
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                left: 3,
                right: 3
            },
            xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 40, 0, 500, 600],
                type: 'line',
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    color: '#03EB8E'
                },
                itemStyle: {
                    color: '#03EB8E'
                },
                smooth: true
            }]
        }
        hookEcharts(lineEnergy6, lineOption6);
    </script>
</body>

</html>